<template>
  <div>
    
    <div class="search">搜索</div>
    <div class="mytable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="updateTime" label="更新日期" width="200" />
        <el-table-column prop="id" label="角色ID" width="120" />
        <el-table-column prop="status" label="角色状态" width="120" />
        <el-table-column prop="name" label="角色名称" width="300" />
        <el-table-column prop="code" label="角色编码" width="200" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column fixed="right" label="操作" min-width="200">
          <!-- row 是 el-table-column 组件的 template 插槽中提供的一个上下文变量。这个变量代表当前行的数据对象，包含了该行的所有相关信息。 -->
          <template #default="{row}">
            <el-button link type="primary" size="small" > 修改 </el-button>
            <el-button link type="primary" size="small" @click="deleteRole(row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mypage">
      <!-- 分页属性：background - 是否为分页按钮添加背景色-->
      <!-- 分页事件：change - `current-page` 或 `page-size` 更改时触发 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageParams.total"
        @change="pageChangeHandler"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { type RolesType, requestGetRolesPage, delRole, editRole } from '@/service/study1/demo3'
import { onMounted, ref } from 'vue'
const tableData = ref<RolesType[]>()

const pageParams = ref({
  pageNum: 1, //当前页
  pageSize: 15, //每页数量
  total: 0
})

/**
 * 获取分页数据
 */
const getPageData = async () => {
  const resRoles = await requestGetRolesPage({
    pageNum: pageParams.value.pageNum,
    pageSize: pageParams.value.pageSize
  })
  console.log(resRoles, 'resRoles')
  tableData.value = resRoles.data.list
  pageParams.value.total = resRoles.data.total
}

/**
 * 分页时间
 */
const pageChangeHandler = (currentPage: number, pageSize: number) => {
  pageParams.value.pageNum = currentPage
  pageParams.value.pageSize = pageSize
  getPageData()
}

/**
 * 删除角色
 */
const deleteRole = (ids: string) => {
  delRole(ids)
  getPageData()
}

/**
 * 修改角色
 */
const changeRole = (roleId:string, data: RolesType) =>{
  editRole(roleId,data)
}
/**
 * 挂载完成时获取数据
 */
onMounted(() => {
  getPageData()
})
</script>

<style scoped>
.mytable {
  margin: 10px 0;
}
.mypage {
  margin-bottom: 10px;
}
</style>
